<template>
  <div class="deptTree">
    <el-button @click="test">测试{{ [rootNode.id] }}</el-button>
    <!--根节点写死\子节点懒加载\手风琴模式-->
    <el-tree
      ref="tree"
      :default-expanded-keys="[rootNode.id]"
      :expand-on-click-node="true"
      :highlight-current="true"
      lazy
      :load="handleLoad"
      node-key="id"
      :props="defaultProps"
    />
    <!-- show-checkbox -->
  </div>
</template>

<script>
  export default {
    name: 'DeptTree',
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        content: '',
        treeData: [],
        rootKey: '00000002',
        rootNode: {
          id: '00000009',
          label: '海尔集团',
        },
        checkedKeys: [],
      }
    },
    methods: {
      /**
       * 根节点写死子节点懒加载
       */
      handleLoad(node, resolve) {
        // 懒加载先保存当前选中的节点key, 展开后再设置一遍解决展开某选中节点后选中被取消的问题
        // if (this.$refs.tree != undefined) {
        //   this.checkedKeys = this.$refs.tree.getCheckedKeys()
        //   console.log(this.$refs.tree.getCheckedKeys())
        // }

        if (node.level == 0) {
          return resolve([this.rootNode])
        } else {
          var children = [
            {
              id: '00000003',
              label: '子节点1',
            },
            {
              id: '00000004',
              label: '子节点2',
            },
            {
              id: '00000005',
              label: '子节点3',
            },
          ]
          resolve(children)
        }
        // if (this.$refs.tree != undefined) {
        //   this.$refs.tree.setCheckedKeys(this.checkedKeys)
        //   console.log(this.checkedKeys)
        // }
      },
      test() {
        var checkedKeys = this.$refs.tree.getCheckedKeys()
        console.log(checkedKeys)
      },
    },
  }
</script>

<style scoped lang="scss"></style>
